import React from 'react';
import { Menu } from 'antd';
import { Link } from 'react-router-dom';

function createMenuItems (conf) {
    return conf.map((confItem) => {
        if (confItem.children) {
            return (
                <Menu.SubMenu 
                    title={ confItem.label } 
                    key={ confItem.key }
                >
                    { createMenuItems(confItem.children) }
                </Menu.SubMenu>
            );
        }
        return (
            <Menu.Item key={ confItem.key }>
                <Link to={ confItem.path }>
                    { confItem.label }
                </Link>
            </Menu.Item>
        );
    });
}

export default function (props) {
    return (
        <Menu
            theme="dark"
            style={{ width: 200 }}
            defaultSelectedKeys={[props.conf[0]?.key]}
        >
            { createMenuItems(props.conf) }
        </Menu>
    );
}